<template>
    <view>
        <!-- components/secode/secode.wxml -->
        <view @tap.stop.prevent="showSecode">
            <slot></slot>
        </view>
        <view class="Mask" v-if="codeShow" @tap.stop.prevent="hideSecode">
            <view class="maskContain" @tap.stop.prevent="contain">
                <form @submit="formSubmit">
                    <view class="codeView" @tap.stop.prevent="downSeccode">
                        <image class="secodeImg" mode="aspectFit" :src="imageSrc"></image>
                        <view class="getcode">看不清？</view>
                    </view>
                    <input class="weui-input" name="seccodeverify" placeholder="请输入验证码" />
                    <button class="subtn" form-type="submit">提交</button>
                </form>
            </view>
        </view>
    </view>
</template>

<script>
// components/secode/secode.js
const app = getApp();
export default {
    data() {
        return {
            codetype: '',
            sechash: '',
            imageSrc: '',
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        codeShow: {
            type: Boolean
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {

        requestCode(type) {
         this. codetype=type
            app.globalData.apimanager
                .requstSeccode(type)
                .then((res) => {
                    if (res.sechash) {
                        this.sechash= res.sechash;this.imageSrc= res.imageSrc;
                    }
                })
                .catch((res) => {});
        },

        haveCode() {
            if (this.sechash) {
                return true;
            }

            return false;
        },

        formSubmit(e) {
            if (this.sechash) {
                var options = {
                    sechash: this.sechash,
                    seccodeverify: e.detail.value.seccodeverify
                };
                this.$emit('secodeSubmit', {
                    detail: options
                });
            }
        },

        downSeccode() {
            this.requestCode(this.codetype);
        },

        showSecode() {
         this.codeShow=true
        },

        hideSecode() {
         this.codeShow=false
        },

        contain() {}
    },

};
</script>
<style>
@import './secode.css';
</style>
